<template>
  <div class="home">
    <van-nav-bar title="报账单" left-text="返回" left-arrow @click-left="returnBtn" />
    
    <van-tabbar v-model="active" active-color="#dfc059" :fixed="false" class="tabbar-tab"  @change="onChangeTab">
       <van-tabbar-item>
        <van-badge :content="num0" :offset="[10,-30]">
          <span class="tab-text">全部</span>
        </van-badge>
        <template #icon="props">
          <van-icon class-prefix="iconfont icon-quanbu" size="2rem" :color="props.active ? '#dfc059' : '#646566'" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-badge :content="num1" :offset="[10,-30]">
          <span class="tab-text">未审核</span>
        </van-badge>
        <template #icon="props">
          <van-icon class-prefix="iconfont icon-icon-test1" size="2rem" :color="props.active ? '#dfc059' : '#646566'" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-badge :content="num2" :offset="[10,-30]">
          <span class="tab-text">已审核</span>
        </van-badge>
        <template #icon="props">
          <van-icon class-prefix="iconfont icon-yishenhe" size="2rem" :color="props.active ? '#dfc059' : '#646566'" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-badge :content="num3" :offset="[10,-30]">
          <span class="tab-text">待支付</span>
        </van-badge>
        <template #icon="props">
          <van-icon class-prefix="iconfont icon-daizhifu" size="2rem" :color="props.active ? '#dfc059' : '#646566'" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-badge :content="num4" :offset="[10,-30]">
          <span class="tab-text">支付中</span>
        </van-badge>
        <template #icon="props">
          <van-icon class-prefix="iconfont icon-zhifuzhong" size="2rem" :color="props.active ? '#dfc059' : '#646566'" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <van-badge :content="num5" :offset="[10,-30]">
          <span class="tab-text">已支付</span>
        </van-badge>
        <template #icon="props">
          <van-icon class-prefix="iconfont icon-yizhifu" size="2rem" :color="props.active ? '#dfc059' : '#646566'" />
        </template>
      </van-tabbar-item>
     
    </van-tabbar>
    <!-- <div class="tab-bu">当前单据状态：<span>{{ tebList[active].name }}</span>，共有<span>{{ currentList.length }}</span>条记录</div> -->
    <div class="list">
      <van-empty image="search" description="暂无数据" v-if="currentList.length === 0" />
      <ul v-else>
        <li class="van-hairline--bottom"  v-for="(item, index) in currentList" :key="item.id" @click="details(item)">
          <div class="list-content list-1">
            <!-- <span>未提交-BX2023070012</span> -->
            <div style="display: flex;align-items: center;">
              <EnumTag :enum-list="getEnumList('ExpenditureReimbursementType')" :enum-key="item.reimbursementType" />
              <EnumTag :enum-list="getEnumList('ExpenditureReimbursementState')" :enum-key="item.state" />
            </div>
            <span>{{ item.reimbursementDate?.substring(0, 10) }}</span>
          </div>
          <div class="list-content list-2 list-name">
            指标单名称：{{ getIdLabel(expenditureKpiList, item.expenditureKpiId, 'kpiName') }}
          </div>
          
          <div class="list-content list-2">
            <div style="display: flex;align-items: center;">
              <LabelTag :foreignList="organizationList" :foreignIds="item.applicationOrganizationId" :foreignLabel="'organizationName'" />
              <LabelTag :foreignList="userList" :foreignIds="item.applicationUserId" :foreignLabel="'name'" />
            </div>
            <div style="display: flex;align-items: center;">
              <DictTag :dict-list="getDictList('ExpenditureSettlement')" :dict-key="item.settlement" />
              <span style="padding-left: .625rem"><MoneyTag :money="item.amount" /></span>
            </div>
            
          </div>
          
          <!-- <div class="list-content list-2">
            <div class="list-content-left">
              <span>{{ index + 1 }}</span>
              
            </div>
            
          </div> -->
        </li>
      </ul>
    </div>
  </div>
  <tabBar :routeActive="1"></tabBar>
</template>


<script setup>
  import { ref } from 'vue'
  import tabBar from '@/h5/components/tabbar.vue';
  import { useRouter } from "vue-router";
  const router = useRouter();
  import {alertErrorMsg, customValidator, getListPageSize, notifySuccess} from '@/config/common'
  import {doGet, doPost, doDownload} from '@/config/http'
  import useUserStore from "@/store/modules/user";
  import {getH5UserId} from "@/config/cookie";
  import initListStore from '@/store/modules/initList'
  // import SvgIcon from "@/components/SvgIcon/index.vue";
  // import InputTagDialog from "@/components/InputTag/inputTagDialog.vue";
  // import User from "@/views/components/base/selectUser.vue";

  let svc = 'icims-api'
  let list = ref([])
  let currentList = ref([])
  let loading = ref(false)
  let finished = ref(false)
  let refreshing = ref(false)
  let num0 = ref(0)
  let num1 = ref(0)
  let num2 = ref(0)
  let num3 = ref(0)
  let num4 = ref(0)
  let num5 = ref(0)

  let active = ref(0)
  let tebList = ref([
    {
      name: '未审核',
      icon: 'icon-tubiao_tijiao',
    },
    {
      name: '已审核',
      icon: 'icon-baoxiao',
    },
    {
      name: '未支付',
      icon: 'icon-shenpi',
    },
    {
      name: '支付中',
      icon: 'icon-gengduo',
    },
    {
      name: '已支付',
      icon: 'icon-gengduo',
    }
  ])

  let listQuery = ref({
    pageNum: 1,
    pageSize:  getListPageSize(),
    sortField: 'id',
    sortType: 'desc',
    expenditureKpiId: null,
    expenditureApplicationId: null,
    reimbursementType: '0',
    reimbursementCode: null,
    reimbursementDateStart: null,
    reimbursementDateEnd: null,
    expenditureEconomicId: null,
    expenditureSubjectId: null,
    amount: null,
    settlement: null,
    applicationOrganizationId: useUserStore().organization.organizationType !== '1' ? useUserStore().organization.id : '',
    applicationUserId: getH5UserId(),
    state: null,
    remark: null,
    createTimeStart: null,
    createTimeEnd: null,
    updateTimeStart: null,
    updateTimeEnd: null,
    reimbursementDateRange: [],
  })

  let expenditureKpiList = initListStore().expenditureKpiList
  let governmentList = initListStore().governmentList
  let organizationList = initListStore().organizationList
  let userList = initListStore().userList

  //  const initList = async () => {
  //   let p1 = doGet(svc, '/expenditure-kpi/page', {pageSize: getListPageSize()}, false)
  //   let p2 = doGet(svc, '/government/page', {pageSize: getListPageSize()}, false)
  //   let p3 = doGet(svc, '/organization/page', {pageSize: getListPageSize()}, false)
  //   let p4 = doGet(svc, '/user/page', {pageSize: getListPageSize()}, false)
  //   let resArray = await Promise.all([p1, p2, p3, p4])
  //   expenditureKpiList.value = resArray[0]['records']
  //   governmentList.value = resArray[1]['records']
  //   organizationList.value = resArray[2]['records']
  //   userList.value = resArray[3]['records']
   
  // }

  const getList = () => {
    loading.value = true
    doGet(svc, '/expenditure-reimbursement/page', listQuery.value).then(res => {
      loading = false
      list.value = res['records']
      num0.value = res['total']
      list.value.forEach(item => {
        switch (item.state) {
          case '0':
            num1.value += 1
            break;
          case '2':
            num2.value += 1
            break;
          case '7':
           num3.value += 1
            break;
          case '5':
            num4.value += 1
            break;
          case '6':
            num5.value += 1
            break;
        }
      })
      onChangeTab(0)
      // currentList = 
      // this.total = parseInt(res['total'])
      
    }).catch(e => {
      console.error(e)
      loading.value = false
    })
  }
  // initList()
  getList()

  const onChangeTab = (num) => {
    switch (num) {
      case 0:
        currentList.value = list.value
        break;
      case 1:
        currentList.value = list.value.filter(item => item.state === '0')
        break;
      case 2:
        currentList.value = list.value.filter(item => item.state === '2')
        break;
      case 3:
        currentList.value = list.value.filter(item => item.state === '7')
        break;
      case 4:
        currentList.value = list.value.filter(item => item.state === '5')
        break;
      case 5:
        currentList.value = list.value.filter(item => item.state === '6')
        break;
    }
  }

  const details = (item) => {
    if(item.state === '0') {
      router.push({path: '/h5_expenses', query: {id: item.id, oper: 'edit'}})
    } else {
      router.push({path: '/h5_expenses', query: {id: item.id, oper: 'view'}})
    }
    
  }

  const onRefresh = () => {
    // // 清空列表数据
    finished.value = false;
    listQuery.value.pageNum = 0
    list.value = []
    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    getList();
  };

  function gotoDetails() {
    router.push({path: '/h5_reimbursementDetails'})
  }

  const returnBtn = () => {
    router.push({path: '/h5_home'})
  };
  // let 
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #ecebeb;
  // background: #Fff;
}
.tabbar-tab {
  // margin: .9375rem 0;
  padding: .9375rem 0;
}
.tab-bu {
  margin-top: .625rem;
  margin-left: .9375rem;
  & span {
    color: var(--van-danger-color);
  }
}
.list {
  width: 100%;
  // margin: 0 .9375rem;
  // margin-top: .9375rem;
  height: calc(100vh - 11rem);
  scroll-behavior: smooth;
  overflow-y: scroll;
  & ul {
    width: 100%;
    height: 100%;
    padding: 0 .625rem;
    scroll-behavior: smooth;
    overflow-y: auto;
    & li {
      border-bottom: 1px solid #C3C3C3;
      border-radius: 6px;
      margin: .625rem 0;
      background: #fff;
      padding: .625rem;
      box-shadow:0 0 5px var(--van-gray-5);
      .list-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .list-1 {
        color:  var(--van-gray-6);
        .list-1-1 {
          display: inline-block;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          width: 60%;
        }
      }
      .list-name {
        font-size: .875rem;
        font-weight: bold;
      }
      .list-2 {
        margin-top: .625rem;
        .list-content-left {
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          width: 80%;
          & span:nth-child(1) {
            background: var(--van-primary-color);
            color: #fff;
            padding: .0625rem .3125rem;
            border-radius: 50%;
          }
          & span:nth-child(2) {
            color: var(--van-text-color);
            font-size: 1rem;
            font-weight: bold;
            padding-left: .625rem;
          }
        }
        & span:nth-child(2) {
          color: var(--van-danger-color);
          font-weight: bold;
          font-size: 1rem;
        }
      }
      .list-3 {
        color:  var(--van-gray-6);
      }
    }
  }
}
</style>

